<template>
<div>
    <!--使用场景: vue变量控制标签是否拥有这种类名 当你的样式不固定的时候可采用动态的方式-->
    <p :class="{red_str: bool}">动态class</p>
    <p :class="{red_str: bool,hello:bool}">hello和class的样式</p>
    <p :class="classobj">对象样式调整</p>
</div>

</template>
<script>
export default {
    data() {
        return {
            //动态class样式
            //语法 v-bind:class="{类名:布尔值}"
            bool: true,
            classobj: {
                red_str: true,
                hello:true
            }
        }
    }
}

</script>
<style scoped>
.red_str{
    color: red;
    font-size: 20px;
}
.hello{
    background-color: aqua;
}

</style>